<template>
  <div class="theme-test-container">
    <h1>主題文本顏色測試頁面</h1>
    
    <div class="test-section">
      <h2>默認文本顏色</h2>
      <p>這段文本應該自動跟隨主題顏色變化</p>
      <span>這是一個span元素，也應該跟隨主題顏色</span>
      <div>這是一個div元素，同樣應該跟隨主題顏色</div>
    </div>
    
    <div class="test-section">
      <h2>輔助類文本顏色</h2>
      <p class="text-theme">使用當前主題的文本顏色</p>
      <p class="text-primary">使用主題的主要顏色</p>
      <p class="text-secondary">使用主題的次要文本顏色</p>
      <p class="text-white">固定白色文本</p>
      <p class="text-black">固定黑色文本</p>
    </div>
    
    <div class="test-section">
      <h2>特殊元素</h2>
      <button class="btn">按鈕元素</button>
      <a href="#" class="nav-item">導航項目</a>
      <span class="primary-text">主要文本</span>
    </div>
    
    <div class="theme-toggle">
      <button @click="toggleTheme">切換主題</button>
      <span>當前主題: {{ currentTheme }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTheme: ''
    }
  },
  mounted() {
    this.currentTheme = document.documentElement.getAttribute('data-theme') || 'dark'
  },
  methods: {
    toggleTheme() {
      const currentTheme = document.documentElement.getAttribute('data-theme')
      const newTheme = currentTheme === 'light' ? 'dark' : 'light'
      document.documentElement.setAttribute('data-theme', newTheme)
      this.currentTheme = newTheme
    }
  }
}
</script>

<style>
/* 使用非scoped樣式，確保能夠覆蓋全局樣式 */
.theme-test-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
}

/* 使用更高優先級的選擇器 */
body .theme-test-container h1,
body .theme-test-container h2,
body .theme-test-container p,
body .theme-test-container span,
body .theme-test-container div {
  color: var(--text-color) !important; /* 使用主題文本顏色變量並強制應用 */
  transition: color var(--transition-time);
}

.test-section {
  margin-bottom: 2rem;
  padding: 1rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background-color: var(--card-bg); /* 背景顏色隨主題變化 */
}

.theme-toggle {
  margin-top: 2rem;
  padding: 1rem;
  background-color: var(--card-bg);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid var(--border-color);
}

body .theme-toggle button {
  padding: 0.5rem 1rem;
  background-color: var(--primary-base);
  color: var(--button-text) !important; /* 使用主題按鈕文字顏色變量 */
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 1rem;
  transition: background-color var(--transition-time), color var(--transition-time);
}

body .theme-toggle span {
  color: var(--text-color) !important; /* 使用主題文本顏色變量 */
  transition: color var(--transition-time);
}

body .btn {
  padding: 0.5rem 1rem;
  background-color: var(--primary-base);
  color: var(--button-text) !important; /* 使用主題按鈕文字顏色變量 */
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 1rem;
  transition: background-color var(--transition-time), color var(--transition-time);
}

body .nav-item {
  color: var(--nav-text) !important; /* 使用主題導航文字顏色變量 */
  text-decoration: none;
  margin-right: 1rem;
  padding: 0.5rem;
  border: 1px solid var(--border-color); /* 邊框隨主題變化 */
  border-radius: 4px;
  background-color: rgba(var(--primary-base-rgb, 141, 157, 106), 0.1); /* 背景色隨主題變化但透明度低 */
  transition: color var(--transition-time), border-color var(--transition-time), background-color var(--transition-time);
}

body .primary-text {
  color: var(--primary-base) !important; /* 使用主題主色作為文字顏色 */
  padding: 0.5rem;
  border: 1px solid var(--primary-base); /* 邊框使用主題主色 */
  border-radius: 4px;
  background-color: rgba(var(--primary-base-rgb, 141, 157, 106), 0.1); /* 背景色隨主題變化但透明度低 */
  transition: color var(--transition-time), border-color var(--transition-time), background-color var(--transition-time);
}
</style>